<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>经典TodoList任务管理</title>
	<link rel="stylesheet" href="./css/style.css">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>

<body>
	<div class="container">
		<header>任务管理</header>
		<div class="inputField">
			<!-- TODO: 待修改代码 -->
			<input id="todoInput" type="text" placeholder="请在这里添加待办事项">
			<button id="addBtn"><i class="fa fa-plus"></i></button>
		</div>
		<ul class="todoList">
			<!-- TODO: 以下列表是静态数据，待修改代码 -->
			<li>学习Vue<span><i class="fa fa-trash"></i></span></li>
			<li>学习CSS<span><i class="fa fa-trash"></i></span></li>
			<li>学习JS<span><i class="fa fa-trash"></i></span></li>
		</ul>
		<div class="footer">
			<!-- TODO: 待修改代码 -->
			<span>你有<span id="taskNumber">3</span>个进行中的任务</span>
			<button id="clearAll">清空</button>
		</div>
	</div>
</body>
<script>
	// TODO: 待补充代码
	let arr=[]
	document.getElementById("addBtn").onclick = function () {
		let val = document.getElementById("todoInput").value;
		arr.push(val)
		document.getElementsByClassName('todoList')[0].innerHTML = 
		`<li>${val}<span><i class="fa fa-trash" onclick='del()'></i></span></li>`
		document.getElementById("taskNumber").innerHTML=arr.length;
	}
	document.getElementById("clearAll").onclick = function () {
		arr=[]
		document.getElementsByClassName('todoList')[0].innerHTML =''
	}
	function del(){
		document.getElementsByClassName('todoList')[0].innerHTML =''
	}
</script>

</html>